<template>
  <div>
    <div class="slide_item">
      <div class="label">封&nbsp;&nbsp;面</div>
      <span>
        <span>封面：</span>
        <select class="select" v-model="defaultCoverID">
          <option v-for="item in covers" :key="item.id" :label="item.coverName" :value="item.id"></option>
        </select>
        <button @click="addCover">...</button>
      </span>
      <span>
        <span>名称：</span>
        <input class="input" type="text" :value="defaultCoverText" @change="SetCoverText($event.target.value)">
      </span>
    </div>
  </div>

</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import action from '../../common/typeActions'

  let extensions = {
    properties: ['openFile', 'showHiddenFiles'],
    filters: [{ name: 'Image', extensions: ['png', 'jpg', 'bmp'] }]
  }
  export default {
    name: 'CoverConfig',
    data: () => {
      return {}
    },
    computed: {
      // ...mapGetters(["defaultCover"]),
      ...mapState({
        covers: state => state.slideEditor.covers
      }),
      defaultCoverID: {
        get () {
          return this.$store.getters.defaultCover.id
        },
        set (value) {
          this.SetSelectedCover(value)
        }
      },
      defaultCoverText: {
        get () {
          return this.$store.getters.defaultCover.coverText
        }
      }
    },
    methods: {
      ...mapActions({
        AddCover: action.SLIDEEDITOR.AddCover,
        SetCoverText: action.SLIDEEDITOR.SetCoverText,
        SetSelectedCover: action.SLIDEEDITOR.SetSelectedCover
      }),
      addCover: function () {
        remote.dialog.showOpenDialog(
          remote.getCurrentWindow(),
          extensions,
          rs => {
            try {
              if (!rs || !rs.length) return
              this.AddCover(rs[0])
            } catch (error) {
              this.$alert(error.message, '提示', { type: 'warning' })
            }
          }
        )
      }
    }
  }
</script>
<style scoped>
  .slide_item {
    width: calc(100% - 60px);
    margin: 10px auto 0;
    padding-bottom: 8px;
    border: 1px solid #cccccc;
    border-radius: 10px;
    position: relative;
    font-size: 0;
  }

  .slide_item .label {
    position: absolute;
    background-color: white;
    top: 0;
    left: 20px;
    font-size: 12px !important;
    transform: translateY(-50%);
  }

  .slide_item > span {
    display: inline-block;
    margin-top: 16px;
    width: 50%;
    font-size: 14px;
  }

  .slide_item > span > span {
    position: static;
    vertical-align: baseline;
    margin-left: 10px;
    margin-top: 2px;
    display: inline-block;
  }

  .slide_item .select {
    width: calc(100% - 100px);
  }

  .slide_item .input {
    width: calc(100% - 70px);
  }

  .slide_item .row {
    width: 100%;
    margin-left: 10px;
  }

  .slide_item .row .input {
    width: calc(100% - 280px);
  }

  .slide_item input,
  .slide_item select {
    height: 25px;
    font-size: 14px;
    padding: 1px 10px;
  }

  select,
  input {
    border: 1px solid #66afe9;
    outline: none;
    border-radius: 3px;
    padding: 3px 10px;
    height: 30px;
    width: 200px;
    font-size: 18px;
  }

  button {
    border: 1px solid #66afe9;
    outline: none;
    border-radius: 3px;
    padding: 0;
    height: 25px;
    width: 30px;
    margin-left: -5px;
  }
</style>

